/* eslint-disable no-var */
import React, { useState, useEffect, useRef } from "react";
// import OrbitControls from "three-orbitcontrols";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
import * as THREE from "three";

import ReactDOM from 'react-dom/client';

export default function ThreeBase() {
    
  let scene: any;
  let camera: any;
  let controls;
  let mesh: any;
  let renderer: any;
  const descRef = useRef(null);
  let demoId:any 
   
  let i =0 ;
  useEffect(() => {
    i++
    if(i ==1){
        demoId =document.getElementById("threeMain") ;
        threeStart();
    }
   
    console.log("123",demoId,i)  
  },[i]);

  const initThree = () => {
    if (demoId) {
      const width = demoId.clientWidth;
      const height = demoId.clientHeight;
      
      renderer = new THREE.WebGLRenderer({
        antialias: true,
      });
      renderer.setSize(width, height);
      demoId.appendChild(renderer.domElement);
      renderer.setClearColor(0xffffff, 1.0);
    }
  };

  const initCamera = (width: any, height: any) => {
    camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = 600;
    camera.up.x = 0;
    camera.up.y = 1;
    camera.up.z = 0;
    camera.lookAt({
      x: 0,
      y: 0,
      z: 0,
    });
  };

  const initScene = () => {
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xbfd1e5);
  };

  const initLight = () => {
    // console.log("initLight", scene);
    const amlight = new THREE.AmbientLight(0xff0000);
    amlight.position.set(100, 100, 200);
    scene.add(amlight);
    const pointlight = new THREE.PointLight(0x00ff00);
    pointlight.position.set(0, 0, 300);
    scene.add(pointlight);
  };

  const initObject = () => {
    const geometry = new THREE.CylinderGeometry(100, 150, 400);
    const material = new THREE.MeshLambertMaterial({ color: 0xffffff });
    // geometry.position = new THREE.Vector3(0, 0, 0);
    mesh = new THREE.Mesh(geometry, material);
    // mesh.position.set(new THREE.Vector3(0, 0, 0));
    scene.add(mesh);
  };

  function initControl(demoId:any) {
    // 将renderer关联到container，这个过程类似于获取canvas元素
    controls = new OrbitControls(camera, demoId);

    // 如果使用animate方法时，将此函数删除
    // controls.addEventListener( 'change', render );
    // 使动画循环使用时阻尼或自转 意思是否有惯性
    controls.enableDamping = true;
    // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
    // controls.dampingFactor = 0.25;
    // 是否可以缩放
    controls.enableZoom = true;
    // 是否自动旋转
    // controls.autoRotate = true;
    controls.autoRotateSpeed = 0.5;
    // 设置相机距离原点的最近距离
    // controls.minDistance  = 10;
    // 设置相机距离原点的最远距离
    controls.maxDistance = 10000;
    // 是否开启右键拖拽
    controls.enablePan = true;
  }

  function threeStart() {
   
    if (demoId){
        const width = demoId.clientWidth;
        const height = demoId.clientHeight;

        initThree();
        initCamera(width, height);
        initScene();
        initLight();
        initControl(demoId);
        initObject();
        animation();
    }
    
   
  }
  function animation() {
    mesh.rotateY(0.01);
    renderer.render(scene, camera);
    requestAnimationFrame(animation);
  }
  return (
    <><div
    id="threeMain"
    ref={descRef}
    style={{ width: "100%", height: "300px" }}
  /></>
  );
}
